<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<script>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

export default {
  methods: {
    redirect_to_login() {
      this.$router.push('/login')
    },
    redirect_to_home() {
      this.$router.push('/home')
    }
  },
  data() {
    return {
      path: computed(() => this.$route.path)
    }
  }
}
</script>

<template>
  <header>
    <div class="logo_div" @click="redirect_to_home()"><h1 class="logo_txt">R-STORE</h1></div>
    <div class="login_btn_div" v-if="path != '/login'" @click="redirect_to_login()">
      <h1 class="login_btn">Войти</h1>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo_txt {
  font-family: Montserrat;
  font-weight: 600;
  font-size: 40px;
  color: #000000;
  transition: 0.25s;
}

.login_btn_div {
  width: 140px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3799c3;
  transition: 0.4s;
}

.login_btn {
  color: #fff;
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.login_btn_div:hover {
  background-color: #59bfeb;
}
</style>
